<template>
  <!-- 图片展示模块 -->
  <div style="height: 100%">
    <!-- 测试按钮区域 -->

    <!-- iframe嵌入区域 -->
    <div class="iframe-container">
      <iframe
        src="http://192.168.30.159:81/roomListPic?id=194"
        width="100%"
        height="600"
        frameborder="0"
        title="房间列表图片展示"
        @load="handleIframeLoad"
        @error="handleIframeError"
      ></iframe>
    </div>
  </div>
</template>

<script setup name="Demo" lang="ts">
import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
import { useRoute } from 'vue-router';
import { getCurrentInstance, ref, onMounted, computed, reactive, watch } from 'vue';
import { ElSelect, ElOption, FormInstance, ElMessage } from 'element-plus';
import wx from 'weixin-js-sdk';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const showFlag = ref(false);
const iframeLoading = ref(true);

const enterprises = ref([]);

// 计算属性：过滤当前楼层企业
const filteredEnterprises = ref([{}, {}]);

// 判断是否为微信环境
const isWechat = () => {
  return /MicroMessenger/i.test(navigator.userAgent);
};

// 判断是否在微信小程序环境
const isMiniProgram = () => {
  try {
    // 检查微信小程序的全局变量
    return window.__wxjs_environment === 'miniprogram' || (window.wx && window.wx.miniProgram);
  } catch (e) {
    return false;
  }
};

// iframe消息处理函数
const handleIframeMessage = (event: MessageEvent) => {
  console.log('收到iframe消息:', event.data);

  // alert('收到iframe消息:' + JSON.stringify(event.data.imageId));
  if (event.data.imageId) {
    try {
      wx.miniProgram.navigateTo({
        url: '/pages/imageview/imageview?imageId=' + event.data.imageId
      });
    } catch (testError) {
      console.error('测试跳转异常:', testError);
      // ElMessage.error('测试跳转异常: ' + testError.message);
    }
  }
};

onMounted(() => {
  // 添加iframe消息监听
  window.addEventListener('message', handleIframeMessage);
  console.log('已添加iframe消息监听');
});

// 组件卸载时清理
onUnmounted(() => {
  // 移除消息监听
  window.removeEventListener('message', handleIframeMessage);
  console.log('已移除iframe消息监听');
});
</script>

<style scoped>
/* iframe容器样式 */
.iframe-container {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.iframe-container iframe {
  width: 100%;
  display: block;
  background: #fff;
}

.iframe-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
</style>
